<!-- 告警事件 -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true">

        <el-form-item label="接入单位">
          <el-select v-model="userInfoId" placeholder="请选择接入单位" clearable="" @change="selectTrigger" filterable>
            <el-option v-for="(item,index) in companyList" :key="index" :label="item.deviceName"
              :value="item.deviceMac">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-select v-model="params.deviceMac" placeholder="请选择一个测点" clearable="" @change="selectTriggerDevice" filterable>
            <el-option v-for="(item,index) in deviceList" :key="index" :label="item.deviceName" :value="item.deviceMac">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-date-picker v-model="params.startTime" type="date" format="yyyy年MM月dd日"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder=" 选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="handleFilter" :loading="btnLoading">查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="row">
      <div class="row-box">
        <label style="padding-inline-start: 40px;"></label>排放超标告警{{pfcbList.length}}条</label>
        <el-timeline class="mLabel">
          <el-timeline-item v-for="(activity, index) in pfcbList" :key="index" :icon="activity.icon"
            :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp" >
            {{activity.content}}
            <el-card>
              <p style="font-size: 13px; color: #444444;">单位：{{'['+ activity.other.deviceMac +'] ' + activity.other.data17}}</p>
              <p v-if="activity.content == '油烟数据异常'" style="font-size: 13px; color: #444444;">浓度：{{activity.other.data1}}mg/m³ </p>
              <p v-else-if="activity.content == '颗粒物数据异常'" style="font-size: 13px; color: #444444;">浓度：{{activity.other.data2}}mg/m³ </p>
              <p v-else style="font-size: 13px; color: #444444;">浓度：{{activity.other.data3}}mg/m³ </p>
              <p v-if="activity.content == '油烟数据异常'" style="font-size: 13px; color: #444444;">标准：<= 1.0 mg/m³ </p>
              <p v-else-if="activity.content == '颗粒物数据异常'" style="font-size: 13px; color: #444444;">标准：<= 5.0 mg/m³ </p>
              <p v-else style="font-size: 13px; color: #444444;">标准：<= 10.0 mg/m³ </p>
              <p style="font-size: 13px; color: #444444;">时间：{{activity.other.syncTime}}</p>
              <!-- <div></div> -->
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="row-box">
        <label style="padding-inline-start: 40px;">设备停机事件{{sbtjList.length}}条</label>
        <el-timeline class="mLabel">
          <el-timeline-item v-for="(activity, index) in sbtjList" :key="index" :icon="activity.icon"
            :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
            {{activity.content}}
            <el-card>
              <p style="font-size: 13px; color: #444444;">单位：{{'['+ activity.other.deviceMac +'] ' + activity.other.data17}}</p>
              <p style="font-size: 13px; color: #444444;">时间：{{activity.other.syncTime}}</p>
              <!-- <div></div> -->
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="row-box">
        <label style="padding-inline-start: 40px;">其他告警{{ysgzList.length}}条</label>
        <el-timeline class="mLabel">
          <el-timeline-item v-for="(activity, index) in ysgzList" :key="index" :icon="activity.icon"
            :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
            {{activity.content}}
            <el-card v-if="activity.content == '联动比异常'">
              <p style="font-size: 13px; color: #444444;">单位：{{'['+ activity.other.deviceMac +'] ' + activity.other.data17}}</p>
              <p  v-if="activity.other.data9 =='1'" style="font-size: 13px; color: #444444;" >排风机：运行中</p>
              <p v-else style="font-size: 13px; color: #444444;" >排风机：未运行</p>
              <p  v-if="activity.other.data10 =='1'" style="font-size: 13px; color: #444444;" >净化器：运行中</p>
              <p v-else style="font-size: 13px; color: #444444;" >净化器：未运行</p>
              <p style="font-size: 13px; color: #444444;" >排风机净化器未联动开启</p>
              <p style="font-size: 13px; color: #444444;">时间：{{activity.other.syncTime}}</p>
              <!-- <div></div> -->
            </el-card>
            <el-card v-else-if="activity.content == '输出电流异常' || activity.content == '输出电压异常'">
              <p style="font-size: 13px; color: #444444;">单位：{{'['+ activity.other.deviceMac +'] ' + activity.other.data17}}</p>
              <p style="font-size: 13px; color: #444444;" >电场：{{activity.other.data1}}</p>
              <p style="font-size: 13px; color: #444444;" >状态：{{activity.other.data6 == '1'? '开':'关'}} | {{+ activity.other.data7 == '1'? '电源保护':'正常工作'}} | {{ + activity.other.data8 == '1'? '短路保护':'未短路'}} | {{+activity.other.data9 == '1'? '超温保护':'未超温'}}</p>
              <p style="font-size: 13px; color: #444444;">时间：{{activity.other.syncTime}}</p>
              <!-- <div></div> -->
            </el-card>
            <el-card v-else-if="activity.content == '压差异常'">
              <p style="font-size: 13px; color: #444444;">单位：{{'['+ activity.other.deviceMac +'] ' + activity.other.data17}}</p>
              <p style="font-size: 13px; color: #444444;">压差：{{activity.other.data13}} Pa </p>
              <p style="font-size: 13px; color: #444444;">参考值：<= 150 Pa </p>
              <p style="font-size: 13px; color: #444444;">时间：{{activity.other.syncTime}}</p>
              <!-- <div></div> -->
            </el-card>
            <el-card v-else>
              <p style="font-size: 13px; color: #444444;">单位：{{'['+ activity.other.deviceMac +'] ' + activity.other.data17}}</p>
              <p style="font-size: 13px; color: #444444;">时间：{{activity.other.syncTime}}</p>
              <!-- <div></div> -->
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
     
    </div>

  </div>
</template>

<script>
  import { queryUserInfoAll, queryDeviceByUserInfoIdPage } from '@/api/isp'
  import { getDevicePoliceByData16 } from '@/api/warn'
  import { mapGetters } from 'vuex'

  export default {
    name: 'Warn',
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    components: {
    },
    data() {
      return {
        btnLoading: false,
        deviceList: [], //设备列表
        companyList: [], //服务商列表
        pfcbList: [], //排放超标列表
        ysgzList: [], //疑似故障
        sbtjList: [], //设备停机列表
        userInfoId: '',
        params: {
          // date: '',
          // userInfoId: '' //服务商ID
          // userId: '',
          deviceMac: '',
          policeType: '非甲烷总烃数据异常,颗粒物数据异常,联动比异常,输出电流异常,输出电压异常,有报警位,压差异常,油烟数据异常', //"油烟数据异常,联动比异常,颗粒物数据异常",	// 报警类型用逗号分隔
          startTime: '',
          endTime: ''
        },
        userId: '',
        selectCompany: ''
      }
    },
    watch: {
      // 搜索条件体
      params: {
        handler: function(val, oldVal) {

        },
        deep: true
      }
    },
    created() {
      this.userId = this.token
      // 取列表
      this.getCompanyList()
      // this.queryWarnList()
    },
    activated() {
      // 取列表
      this.getCompanyList()
      // this.queryPoliceNumType()
    },
    methods: {
      selectTrigger(e) {
        var _that = this
        console.log('e :>> ', e)
        for (let i = 0; i < this.companyList.length; i++) {
          const element = this.companyList[i]
          if (element.deviceMac === e) {
            _that.selectCompany = element.deviceName
          }
        }
        if (this.userInfoId !== '') {
          this.queryDevice(this.userInfoId)
        }
      },
      selectTriggerDevice(e) {

      },
      handleFilter(val) {
        this.queryWarnList()
      },
      deviceOnclick(e) {
        for (let i = 0; i < this.deviceList.length; i++) {
          const mInfo = this.deviceList[i]
          if (mInfo.deviceMac === e.deviceMac) {
            mInfo.type = 'primary'
          } else {
            mInfo.type = 'deafult'
          }
        }
      },
      getCompanyList() {
        var mList = []
        queryUserInfoAll(this.userId).then(res => {
          // this.companyList = res.data
          mList = res.data
          this.companyList = mList
        }).catch(err => { err })
      },
      queryDevice(val) {
        queryDeviceByUserInfoIdPage(this.userInfoId * 1).then(res => {
          console.log('res :>> ', res)
          var mList = []
          for (let i = 0; i < res.data.length; i++) {
            const element = res.data[i]
            var mItem = { deviceMac: element.deviceMac, deviceName: element.deviceName }
            mList.push(mItem)
          }
          this.deviceList = mList
          // if (this.deviceList.length > 0) {
          //   var item = this.deviceList[0]

          // }
        }).catch(err => {
          err
        })
      },
      getTady() {
        var date = new Date()
        var month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
        var day = date.getDate() > 9 ? date.getDate() : '0' + (date.getDate())
        var tody = date.getFullYear() + '-' + month + '-' + day + ' 00:00:00'
        return tody
      },
      queryWarnList() {
        if (this.params.deviceMac === '' || this.selectCompany === '') {
          return
        }
        if (this.params.startTime === '') {
          this.params.startTime = this.getTady()
        }
        var time = this.params.startTime
        this.params.endTime = time.toString().substring(0, 10) + ' 23:59:59'
  
        var _that = this
        _that.pfcbList = []
        _that.ysgzList = []
        _that.sbtjList = []
        // this.params.userId = this.userId * 1
        getDevicePoliceByData16(this.params).then(res => {
          console.log('res :>> ', res)
          _that.pfcbList = []
          _that.ysgzList = []
          _that.sbtjList = []
          for (let i = 0; i < res.data.length; i++) {
            const element = res.data[i]
            element.data17 = _that.selectCompany
            if (element.data16 === '油烟数据异常' || element.data16 === '非甲烷总烃数据异常' || element.data16 === '颗粒物数据异常') {
              const activity = {
                content: element.data16,
                timestamp: '',
                size: 'large',
                type: 'primary',
                color: 'crimson',
                icon: 'el-icon-warning',
                other: element
              }
              this.pfcbList.push(activity)
            } else if (element.data16 === '输出电压异常' || element.data16 === '输出电流异常') {
              const activity1 = {
                content: element.data16,
                timestamp: '',
                size: 'large',
                type: 'primary',
                color: 'crimson',
                icon: 'el-icon-warning',
                other: element
              }
              this.ysgzList.push(activity1)
            } else {
              const activity2 = {
                content: element.data16,
                timestamp: '',
                size: 'large',
                color: 'crimson',
                type: 'primary',
                icon: 'el-icon-warning',
                other: element
              }
              this.sbtjList.push(activity2)
            }
          }
        }).catch(err => { err })
      }
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .row-box {
    width: 33.333333%;
    margin: 15px;
    align-items: center;
    /* text-align: center; */

  }

  .mLabel {
    margin-top: 20px;
    text-align: left;
  }

</style>